<template>
  <div class="question-list">
      <a-card title="题单列表" class="card" size="small"  style="width: 100%">
        <a-form :layout="queryForm.layout" :model="queryForm" v-bind="formItemLayout">
            <a-row  :gutter="16">
              <a-col  :span="12" flex="auto">
                <a-form-item label="题单名称">
                <a-input v-model:value="queryForm.title" placeholder="输入题单名称" />
                </a-form-item>
              </a-col>
              <a-col  :span="12" flex="auto">
                <a-form-item label="创建人">
                  <a-input v-model:value="queryForm.nickName" placeholder="输入昵称" />
                </a-form-item>
              </a-col>
              <a-col  :span="12" flex="auto">
                <a-form-item label="题单类型">
                  <a-radio-group v-model:value="queryForm.auth" :options="AUTH" />
                  <a-button @click="getProblemList_" type="primary">查询</a-button>
                </a-form-item>
              </a-col>
            </a-row>
        </a-form>
        <a-table
            :scroll="{ x: 750 }"
            :loading="loading"
            :pagination="pagination"
            @change="handleTableChange"
            :columns="columns"
            :data-source="data"
            :custom-row="opt">
          <template #bodyCell="{  column, text ,record }">
            <template v-if="column.dataIndex === 'title'">
              <a @click="gotoProblemListDetail(record)">{{ text }}</a>
            </template>
            <template v-else-if="column.dataIndex === 'userVO'">
              <a style="cursor: pointer" @click="() => router.push(`/user/${text?.userId}`)"  >{{ text?.nickName }}</a>
            </template>
          </template>
        </a-table>
      </a-card>

    <a-modal v-model:open="open" title="验证身份" @ok="handleOk">
      <a-form
          :model="validateForm"
          style="margin: 20px 0"
          layout="inline"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入你的密码' }]"
        >
          <a-input-password v-model:value="validateForm.password" />
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script lang="ts" setup>

import type { UnwrapRef } from 'vue';
import {AUTH} from "@/common/enum"
import * as api from "@/api/problemList"
import {getProblemTypeList} from "@/api/problemType";
import {getDifficultyList} from "@/api/difficulty";
import {getTagList} from "@/api/tag";
import {getProblemList} from "@/api/problem";
import {reactive, ref} from "vue";
import router from "@/router";

//初始化
const loading = ref<Boolean>(true)
onMounted(async () => {
 // console.log("onMounted")
  await getProblemList_();
})
const getProblemList_ = async () => {
  loading.value = true;
  // const data_ = {
  //   title: queryForm.title,
  //   nickName: queryForm.nickName,
  //   auth: queryForm.auth,
  // }
  const params = {
    pageNum:pagination.current,
    pageSize:pagination.pageSize,
    orderByColumn:"rank",
  }
  const res = await api.getProblemList(queryForm,params)
  data.value = res.data.rows;
  pagination.total = res.data.total;
  loading.value = false;
}
//——————————————

//筛选表单
interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  title: string;
  auth: number;
  nickName: string;
}
const queryForm: UnwrapRef<FormState> = reactive({
  layout: 'horizontal',
  title: '',
  auth: 0,
  nickName:''

});
const formItemLayout = computed(() => {
  const { layout } = queryForm;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});
//_____________//

//表结构
const data = ref();
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '题目数',
    dataIndex: 'problemNum',
    key: 'problemNum',
    width:120,
  },
  // {
  //   title: '收藏数',
  //   dataIndex: 'address',
  //   key: 'address 1',
  //   width:120,
  //   ellipsis: true,
  // },
  {
    title: '创建者',
    dataIndex: 'userVO',
    key: 'userVO',
    ellipsis: true,
    width: 250
  },
];
const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 10,
  pageSizeOptions:['5', '10', '15', '20']

});
const handleTableChange = (p, filters, sorter) => {
  pagination.current = p.current
  getProblemList_()
}
const gotoProblemListDetail = (e) =>{
  // if(e.auth == AUTH[1].value){
  //   validateForm.problemListId = e.id
  //   showModal()
  //   return;
  // }
  // console.log(e)
  router.push(`/problemListDetail/${e.id}`);
}
//----------------------------------------------------------------//


//对话框
const open = ref<boolean>(false)
const validateForm = reactive({
  password:"",
  problemListId:""
})
const showModal = () => {
  validateForm.password = ''
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
 // console.log(e);
  open.value = false;
  router.push({
    path:`/problemListDetail/${validateForm.problemListId}`,
    query:{
      pwd : validateForm.password
    }
  });
};

</script>
<style scoped>

</style>
